<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>拼团</span></div>
    <div class="bds">
      <el-collapse v-model="activeName">
        <el-collapse-item title="组件样式" name="c0">
          <el-form size="medium" label-width="100px">
            <el-form-item label="内容布局">
              <el-radio-group size="small" v-model="data.seckillType">
                <el-radio :label="1">滑动</el-radio>
                <el-radio :label="2">列表</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="c1">
          <el-form size="medium" label-width="100px">
            <el-form-item label="标题图标">
              <div class="icon_box">
                <span class="hasIcon" v-show="data.content.icon != ''">
                  <i :class="data.content.icon + ' iconfont'"></i>
                  <i class="icon-abl-close el-icon-error" @click="removeIcon('icon')"></i>
                  <span class="choose_bar" @click="chooseIcon('icon')"><i class="txt">替换</i></span>
                </span>
                <span class="noIcon" v-show="data.content.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon('icon')"></i></span>
              </div>
            </el-form-item>
            <el-form-item label="标题内容"><el-input style="width:300px;" maxlength="4" show-word-limit placeholder v-model="data.content.title"></el-input></el-form-item>
            <el-form-item label="图标色"><ColorPicker :color="data.color" :name="'head_icon_color'"></ColorPicker></el-form-item>
            <el-form-item label="标题字体色"><ColorPicker :color="data.color" :name="'head_txt_color'"></ColorPicker></el-form-item>
            <el-form-item label="标题背景色"><ColorPicker :color="data.color" :name="'head_bg'"></ColorPicker></el-form-item>

            <el-form-item label="倒计时">
              <el-radio-group size="small" v-model="data.showTime">
                <el-radio label="block">显示</el-radio>
                <el-radio label="none">不显示</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="文字颜色"><ColorPicker :color="data.color" :name="'time_text_color'"></ColorPicker></el-form-item>
                  <el-form-item label="数字颜色"><ColorPicker :color="data.color" :name="'time_num_color'"></ColorPicker></el-form-item>
                  <el-form-item label="背景颜色"><ColorPicker :color="data.color" :name="'time_bg_color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="商品设置" name="c3">
          <el-form size="medium" label-width="100px">
            <el-form-item label="选择活动">
              <div class="select_link" style="margin-bottom:8px;">
                <div v-if="data.selectdata && data.selectdata.id" class="select_btn select_check">
                  <i class="el-icon-link"></i>
                  <el-input size="small" :value="data.selectdata.name" disabled></el-input>
                  <el-button size="small" type="text" @click="addgroup">修改</el-button>
                </div>
                <div v-else class="select_btn select_d" @click="addgroup">
                  <i class="el-icon-link"></i>
                  <span>选择活动</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="添加商品">
              <div class="proSelect">
                <div class="phead">
                  <div class="name">商品</div>
                  <div class="price">价格</div>
                  <div class="action">操作</div>
                </div>
                <ul>
                  <draggable element="ul" v-model="data.list" :animation="500">
                    <li v-for="(item, i) in data.list" :key="i">
                      <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                      <div class="pro">
                        <vimage style="width: 40px; height: 40px" :src="item.master" fit="fit"></vimage>
                        <div class="txt">
                          <span class="mark" v-if="item.type == 0">实</span>
                          {{ item.name }}
                        </div>
                      </div>
                      <div class="price">￥{{ item.sell_price }}</div>
                      <div class="action"><el-button type="text" @click="removePro(i)">删除</el-button></div>
                    </li>
                  </draggable>
                  <li class="addPro" @click="addPro"><el-button type="text">添加产品</el-button></li>
                </ul>
              </div>
            </el-form-item>
            <el-form-item label="商品背景"><ColorPicker :color="data.color" :name="'commodity_bg'"></ColorPicker></el-form-item>
            <el-form-item label="商品标题"><ColorPicker :color="data.color" :name="'commodity_title_color'"></ColorPicker></el-form-item>

            <el-form-item label="拼团价格">
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="显示文字">
                    <el-input maxlength="3" v-model="data.commodity_price_title" style="width: 240px;" size="medium" placeholder="拼团价" class="">
                      <el-button @click="data.commodity_price_title = '拼团价'" size="medium" slot="append">重置</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="文字颜色"><ColorPicker :color="data.color" :name="'commodity_price_color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <!-- <el-form-item label="标签颜色"><ColorPicker :color="data.color" :name="'price_title_bg'"></ColorPicker></el-form-item>
            <el-form-item label="标签背景色"><ColorPicker :color="data.color" :name="'price_title_color'"></ColorPicker></el-form-item>
 -->
            <el-form-item label="商品销量">
              <el-radio-group size="small" v-model="data.showsell">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品原价">
              <el-radio-group size="small" v-model="data.showoldPrice">
                <el-radio label="block">显示</el-radio>
                <el-radio label="none">不显示</el-radio>
              </el-radio-group>
              <div class="bg-color" v-if="data.showoldPrice == 'block'">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="显示文字">
                    <el-input maxlength="3" v-model="data.old_price_title" style="width: 240px;" size="medium" placeholder="单买价" class="">
                      <el-button @click="data.commodity_price_title = '单买价'" size="medium" slot="append">重置</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="文字颜色"><ColorPicker :color="data.color" :name="'old_price_title_color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <el-form-item label="购买按钮">
              <el-radio-group size="small" v-model="data.btns.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="按钮文字"><el-input v-model="data.btns.text"></el-input></el-form-item>
                  <el-form-item label="文字颜色"><ColorPicker :color="data.btns" :name="'color'"></ColorPicker></el-form-item>
                  <el-form-item label="按钮颜色"><ColorPicker :color="data.btns" :name="'bg'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="基本样式" name="c2">
          <el-form size="medium" label-width="100px">
            <el-form-item label="背景色"><ColorPicker :color="data.color" :name="'bg'"></ColorPicker></el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.top"></el-slider>
                <el-input-number v-model="data.margin.top" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.bottom"></el-slider>
                <el-input-number v-model="data.margin.bottom" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.margin.lr"></el-slider>
                <el-input-number v-model="data.margin.lr" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>

            <el-form-item label="圆角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="20" v-model="data.radius.template_radius"></el-slider>
                <el-input-number v-model="data.radius.template_radius" :controls="false" :min="0" :max="20"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="选择活动" :visible.sync="showSelectPro" width="50%" append-to-body>
        <SelectGroup ref="selectgroup" :key="rk" :data="selectPro" :active="active" :g_id="data.selectdata.id" :limit="data.limit" @outData="closePro"></SelectGroup>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import Linkdiv from '@/components/Link/index';
import ColorPicker from '@/components/ColorPicker/index';
import Upload from '@/components/Upload/SingleImage2';
import draggable from 'vuedraggable';
import SelectGroup from '@/components/SelectGroup/index';
import {getgroup} from '@/api/mall/groupon';

export default {
  data() {
    return {
      activeName: ['c0', 'c1', 'c2', 'c3'],
      selectPro: [],
      rk: 0,
      showSelectPro: false,
      active: 0
    };
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    Linkdiv,
    ColorPicker,
    Upload,
    draggable,
    SelectGroup
  },
  methods: {
    //重置颜色
    Reset_Color(a, b) {
      this.data.color[a] = b;
    },
    //删除图标
    removeIcon(tag) {
      this.data.content[tag] = '';
    },

    //选择图标
    chooseIcon(type) {
      this.type = type;
      this.$parent.showiconselcet();
    },
    geticon(data) {
      this.data.content.icon = data;
    },
    //添加商品
    addPro() {
      this.selectPro = this.data.list;
      this.rk++;
      if (this.data.selectdata.id) {
        this.active = 1;

        this.$nextTick(() => {
          this.$refs.selectgroup.getdetail(this.data.selectdata.id);
        });
      } else {
        this.active = 0;
      }

      this.showSelectPro = true;
    },
    addgroup() {
      // this.g_id = this.data.selectdata.id;
      this.selectPro = this.data.list;
      this.active = 0;
      // this.selectdata = this.data.selectdata;
      this.showSelectPro = true;
    },
    //删除产品
    removePro(i) {
      this.data.list.splice(i, 1);
    },
    getdetail(id) {
      let data = {
        id: id
      };
      getgroup(data).then(res => {
        console.log(res);
      });
    },
    //关闭选择产品框
    closePro(data, list) {
      if (data) {
        this.data.selectdata = data;
        this.data.list = list;
      }

      this.showSelectPro = false;
    }
  }
};
</script>

<style lang="scss">
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
//样式覆盖
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 22px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .price {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;

      // &:last-child{
      //   border-bottom: none;
      // }

      &.addPro {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: none;
      }

      .dragIcon {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 16px;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .price {
        width: 80px;
        text-align: center;
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}
.upload_div {
  width: 100px;
  height: 100px;
}
.select_check .el-input__inner {
  border: none;
  background: #fff !important;
  padding: 0 !important;
  color: #333333 !important;
}
.select_check .el-button {
  padding: 0 15px;
}
.select_link {
  background: #fff;
}

.select_btn {
  padding: 4px 6px;
  color: #2d8cf0;
  box-sizing: border-box;
  border: 1px solid #e9edef;
  background: #ffffff;
}
.select_d {
  display: flex;
  align-items: center;
}
.select_d .el-icon-link {
  padding: 0 6px 0 0;
}

.select_d:hover {
  border: 1px solid #2d8cf0;
}
.select_check {
  display: flex;
  align-items: center;
  padding: 0;
  .el-icon-link {
    padding: 0 6px;
    color: #333333;
  }
}
</style>
